前言
Java后端技术点
StringUtils常用API
学习时笔记(Linux)
学习时笔记(Git)
学习时笔记(Docker)
学习时笔记(Vue2+3)
面试宝典
学习时笔记(JavaScript)
1.JS基础：语法+流程控制
2.JS基础：数组+函数+对象
3.Web APIS：Dom获取+属性操作
4.Web APIS：Dom事件基础+进阶
5.Web APIS：DOM节点+移动端滑动
6.Web APIS：BOM操作+正则+阶段案例
7.JS进阶：作用域+解构+箭头函数
8.JS进阶：构造函数+数据常用函数+深入面向对象
9.JS进阶：高阶特性
10.ES6（上）
11.ES6（下)-ES9
12.ES10-ES13
学习时笔记(JavaWeb)
学习时笔记(Java)
学习时笔记(Python)
1.Web API 概述
建议获取标签元素的时候，优先使用const
作用和分类
- 作用：就是使用 JS 去操作 html 和浏览器
- 分类：DOM(文档对象模型)、BOM(浏览器对象模型)
DOM
- (Document Object Model)是用来呈现以及与任意 HTML 或 XML文档交互的API
- DOM对象
- 浏览器根据html标签生成 JS对象
- 所有标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签上
- DOM的核心思想
- 吧网页内容当做对象来处理
- document 对象
- 是DOM里提供的一个对象
- 浏览器根据html标签生成 JS对象
2.获取DOM对象
根据CSS选择器来获取DOM元素【重点】
- 选择匹配的第一个元素-语法：document.querySelector("css选择器")
// 1.获取匹配的第一个元素 // 1.1根据标签获取div const div = document.querySelector("div") // 1.2根据class值获取 const box = document.querySelector(".box") console.log(box) // 1.3根据id=nav来获取标签 const nav = document.querySelector("#nav") console.log(nav) // 1.4获取第一个li const li = document.querySelector("ul li:first-child") console.log(li)- 选择匹配的多个元素-语法：document.querySelectorAll("css选择器")
// 2.获取匹配的所有元素 // 2.1获取所有的li const lis = document.querySelectorAll("ul li") for(let i = 0;i<lis.length;i++){ lis[i].style.color = "red" }
【注意点】：获取匹配的多个元素，得到的是一个伪数组：存在长度、索引号，但是没有pop()、push()等数组方法
3.操作元素内容+属性
操作元素内容
目标
- 能够修改元素的文本更换内容
使用
- 元素.innerText
- 将文本内容添加/更新到任意标签位置
- 显示纯文本，不解析标签
// 1.获取元素 const div = document.querySelector("div") console.log(div.innerText) div.innerText = "马浩楠" console.log(div.innerText)- 元素.innerHTML
- 将文本内容添加/更新到任意标签位置
- 会解析标签，多标签建议使用模板字符
// 2.通过innerHTML 可以使它解析HTML标签（这是与innerText不同之处） div.innerHTML = "<strong>马浩楠</strong>" console.log(div.innerHTML)- 元素.innerText
抽奖案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>年会抽奖</title>
<style>
.wrapper {
width: 840px;
height: 420px;
background: url(../images/bg01.jpg) no-repeat center / cover;
padding: 100px 250px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrapper">
<strong>传智教育年会抽奖</strong>
<h1>一等奖：<span id="one">???</span></h1>
<h3>二等奖：<span id="two">???</span></h3>
<h5>三等奖：<span id="three">???</span></h5>
</div>
<script>
const personArr = ["周杰伦","刘德华","周星驰","老师","张学友"]
const one = document.querySelector("#one")
lotteryOne = parseInt(Math.random()*personArr.length)
console.log(lotteryOne)
one.innerHTML = personArr[lotteryOne]
personArr.splice(lotteryOne,1)
const two = document.querySelector("#two")
lotteryTwo = parseInt(Math.random()*personArr.length)
two.innerHTML = personArr[lotteryTwo]
personArr.splice(lotteryTwo,1)
const three = document.querySelector("#three")
lotteryThree = parseInt(Math.random()*personArr.length)
three.innerHTML = personArr[lotteryThree]
personArr.splice(lotteryThree,1)
</script>
</body>
</html>
操作元素属性
操作元素常用属性
- 可以通过 JS 设置/修改标签元素属性
- 常见属性：href、title、src
<img src="../images/1.webp"/> <script> // 1.获取img元素 const img = document.querySelector("img") // 2.修改图片元素src img.src = "../images/2.webp" img.title = "艺术照" </script>
案例：页面刷新，图片随机更换
<style> body { background: url(../images/desktop_1.jpg) no-repeat top center/cover; } </style> <body> <script> const random = parseInt(Math.random()*10+1) document.body.style.backgroundImage = `url(../images/desktop_${random}.jpg)` </script> </body>操作元素样式属性
- 通过 style 属性操作 CSS
<div></div> <script> // 1.获取元素 const div = document.querySelector("div") div.style.width = "300px" // 修改background-color ：驼峰命名形式写属性名 div.style.backgroundColor = "black" </script>- 通过类名(className) 操作CSS
- class.add()
- class.remove()
- class.toggle()
<style> .box{ width: 300px; height: 300px; color:black ; } .active{ color:red; background-color: pink; } </style> <body> <div class="box">文字</div> <script> const box = document.querySelector(".box") // 修改样式 // 1.追加类名 add() box.classList.add("active") // 2.移出类名 remove() box.classList.remove("box") // 3.切换类 toggle() ：有则删除，无则加入 box.classList.toggle("box") </script> </body>案例：轮播图随机
<body>
<div class="slider">
<div class="slider-wrapper">
<img src="./images/slider01.jpg" alt="" />
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了？</p>
<ul class="slider-indicator">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 1. 初始数据
const sliderData = [
{ url: '../images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
{ url: '../images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
{ url: '../images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
{ url: '../images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
{ url: '../images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
{ url: '../images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
{ url: '../images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
{ url: '../images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
]
let random = parseInt(Math.random()*sliderData.length)
const img = document.querySelector("img")
const p = document.querySelector("p")
const div = document.querySelector(".slider-footer")
const li = document.querySelector(`.slider-footer ul li:nth-child(${random+1})`)
img.src = sliderData[random].url
p.innerText = sliderData[random].title
div.style.backgroundColor = sliderData[random].color
li.className = "active"
</script>
</body>
- 操作表单元素 属性
- input.属性名
- 常见：value、type、checked、disabled
<body>
<input type="text" value="电脑"/>
<input type="checkbox" name="hobby" id="ch">
<input type="button" value="点击" id="bt">
<script>
const input = document.querySelector("input")
// 获取表单里面的值
console.log(input.value)
// 设置表单的值
input.value = "哈哈"
// 设置表单类型
input.type = "password"
// 修改复选框，对勾
const ch = document.querySelector("#ch")
ch.checked = true
// 禁用按钮
const bt = document.querySelector("#bt")
bt.disabled = true
</script>
</body>
- 自定义属性
- 在html5中退出来专门的data-自定义属性
- 在标签上一律以 data- 开头
- 在DOM对象上一律以 dataset 对象方式获取
<body>
<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
const div = document.querySelector("div")
// 自定义属性 data-开头。获取自定义属性和属性值 div.dataset.属性名
console.log(div.dataset.id) // 1
console.log(div.dataset.spm) //不知道
</script>
</body>
4.定时器-间歇函数
开启定时器
- setInterval(函数,间隔时间)：每搁一段时间调用这个函数【单位毫秒】
// setInterval(执行函数,间隔) let number = setInterval(function(){ console.log("一秒执行一次") },1000) // setInterval 会返回值数值型的ID号【标志每个定时器都是独一无二的】 console.log(number)关闭定时器
// 关闭定时器 clearInterval(number)案例：阅读注册协议
<body>
<textarea name="" id="" cols="30" rows="10">
用户注册协议
欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
</textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议(5)</button>
<script>
const bt = document.querySelector(".btn")
// 设置定时器
let i = 5
let timeId = setInterval(function(){
i--
bt.innerText = `我已经阅读用户协议(${i})`
if(i==0){
// 关闭定时器
clearInterval(timeId)
// 开启按钮
bt.disabled = false
bt.innerText = `我已经阅读用户协议`
}
},1000)
</script>
5.综合案例
<body>
<div class="slider">
<div class="slider-wrapper">
<img src="../images/slider01.jpg" alt="" />
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了？</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 1. 初始数据
const sliderData = [{
url: '../images/slider01.jpg',
title: '对人类来说会不会太超前了？',
color: 'rgb(100, 67, 68)'
},
{
url: '../images/slider02.jpg',
title: '开启剑与雪的黑暗传说！',
color: 'rgb(43, 35, 26)'
},
{
url: '../images/slider03.jpg',
title: '真正的jo厨出现了！',
color: 'rgb(36, 31, 33)'
},
{
url: '../images/slider04.jpg',
title: '李玉刚：让世界通过B站看到东方大国文化',
color: 'rgb(139, 98, 66)'
},
{
url: '../images/slider05.jpg',
title: '快来分享你的寒假日常吧~',
color: 'rgb(67, 90, 92)'
},
{
url: '../images/slider06.jpg',
title: '哔哩哔哩小年YEAH',
color: 'rgb(166, 131, 143)'
},
{
url: '../images/slider07.jpg',
title: '一站式解决你的电脑配置问题！！！',
color: 'rgb(53, 29, 25)'
},
{
url: '../images/slider08.jpg',
title: '谁不想和小猫咪贴贴呢！',
color: 'rgb(99, 72, 114)'
},
]
let i = 0
const img = document.querySelector(".slider-wrapper img")
const p = document.querySelector(".slider-footer p")
const div = document.querySelector(".slider-footer")
setInterval(function () {
const activeLi = document.querySelector(".active").className = ""
const li = document.querySelector(`.slider-footer ul li:nth-child(${i+1})`).className = "active"
img.src = sliderData[i].url
p.innerText = sliderData[i].title
div.style.backgroundColor = sliderData[i].color
i++
if (i >= sliderData.length) {
i = 0
}
}, 1000)
</script>
</body>